from nicegui import ui,Tailwind
from ex4nicegui.reactive import rxui
from ex4nicegui import to_ref,ref_computed,effect,effect_refreshable
from icons import ICON_NAMES as icons
'''
本文件书写一个小图标搜索器!方便使用与学习nicegui
'''

'''region shuju'''
# 定义响应式对象 # 把输入框接受到的内容和变量链接!!!也就是 响应式(接受) 对象(shuju,以对象形式;通过.value获得值!)
r_input = to_ref('')

#创建响应式计算
@ref_computed
def cp_icon_names():
    return [name for name in icons if name.find(r_input.value) >= 0]

r_pagination = rxui.use_pagination(cp_icon_names,page_size=50) #使用分页功能!小图标全在一起的效果很差!







'''endregion'''


'''region 界面'''
input_search = rxui.input(
    "icon搜索",
    value=r_input,
    placeholder="输入icon图标名字"
).props('outlined clearable debounce="500" ')#.classes('self-center w-[30%]') #居中放置
# outlined :外部线
# clearable :删除功能;
# debounce :延迟响应

tw = Tailwind().align_self('center').width('1/4') #与上方注释掉的classes效果相同
input_search.tailwind(tw)

# temp: 在文本框中查看查询到的标签字符
# @ref_computed
# def cp_data():
#     return ",".join(cp_icon_names.value)
# rxui.label(cp_data).classes("max-w-[50%] break-words")


## 小图标展示

# 图标展示函数
def icon_box(icon_name:str):
    with ui.card().classes(
    # 分别为:      居中  触碰时鼠标变为可点击  元素间隙1 动画效果默认0.3s  触碰时变大         文字为蓝
            'flex-center cursor-pointer gap-1 transition-all hover:scale-105 hover:text-blue-500'
    ) as card: #往容器中放东西,用with!
        ui.icon(icon_name, size="3rem") #传入图标名字和大小:3rem(3字符)
        ui.label(icon_name).classes(
            'whitespace-nowrap overflow-hidden text-ellipsis max-w-full'
        )
        ui.tooltip(f'点击复制名字{icon_name}') #任何组件都可以加入tooltip!

    async def on_click_card():
        await ui.run_javascript(
            f"navigator.clipboard.writeText('{icon_name}')",respond=False
        )
        ui.notify(f"复制名字[{icon_name}]到剪贴板",position='top-right') #提示信息与出现位置

    card.on('click',on_click_card)

with ui.grid(columns=10).classes("w-full"):
    @effect_refreshable #创建一个动态刷新的函数
    def _():
        for icon in r_pagination.current_source.value: #得到搜索到并分页的所有icon
            icon_box(icon)

r_pagination.create_q_pagination()




'''endregion'''

ui.run()